<template>
    <div class="index">
        <div style="margin-top: -600px; text-align: center; font-size: 24px">
            <h1>欢迎登录在线考试系统后台</h1>
        </div>
        
        <!-- 图片轮播展示框 -->
        <div class="carousel-container">
            <div class="carousel">
                <img :src="currentImage" alt="轮播图" class="carousel-image">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            user: {
                //用户信息
                userName: null,
                userId: null,
            },
            images: [ // 图片数组
                'https://via.placeholder.com/800x400?text=Image+1',
                'https://via.placeholder.com/800x400?text=Image+2',
                'https://via.placeholder.com/800x400?text=Image+3',
            ],
            currentIndex: 0, // 当前显示的图片索引
        };
    },
    computed: {
        currentImage() {
            return this.images[this.currentIndex];
        }
    },
    created() {
        this.startCarousel();
    },
    methods: {
        startCarousel() {
            setInterval(() => {
                this.currentIndex = (this.currentIndex + 1) % this.images.length;
            }, 3000); // 每3秒切换一张图片
        }
    },
};
</script>

<style scoped>
.index {
    margin-left: 70px;
    background-image: url('../../assets/bg3.gif'); /* 设置背景图像 */
    background-size: cover; /* 背景图像覆盖整个容器 */
    background-position: center; /* 背景图像居中 */
    background-repeat: no-repeat; /* 背景图像不重复 */
    height: 100vh; /* 设置容器高度为视口高度 */
    width: 100%; /* 确保宽度也为 100% */
    display: flex; /* 使用 flex 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}
.carousel-container {
    width: 100%;
    max-width: 800px; /* 限制最大宽度 */
    margin: 20px auto; /* 上下外边距20px，左右自动居中 */
    position: relative;
    overflow: hidden; /* 隐藏超出部分 */
}
.carousel {
    width: 100%;
    height: 400px; /* 图片高度 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.carousel-image {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease; /* 平滑过渡效果 */
}
</style>